export const barChart = {
    computed: {
        catList() {
            return this.fillrectData.map((item) => item.classify)
        },
        upList() {
            return this.fillrectData.map((item) => item.classifyList[2].value)
        },
        natureList() {
            return this.fillrectData.map((item) => item.classifyList[1].value)
        },
        downList() {
            return this.fillrectData.map((item) => item.classifyList[0].value)
        }
    },
    methods: {
        drawBar() {
            var data = {
                up: this.upList,
                nature: this.natureList,
                down: this.downList,
            };
            var catg = this.catList;
            var up = data.up;
            var down = data.down;
            var nature = data.nature;
            var upSum = 0; //正面数据总和
            var downSum = 0; // 负面数据总和
            var natureSum = 0; // 中立数据总和
            for (let i = 0; i < up.length; i++) {
                upSum += up[i];
            }
            for (let i = 0; i < down.length; i++) {
                downSum += down[i];
            }
            for (var i = 0; i < nature.length; i++) {
                natureSum += nature[i];
            }
            var barChart = this.$echarts.init(document.getElementById("bar-chart"));
            var option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "none", // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var re = "";
                        re =
                            params[2].name +
                            "<br/>" +
                            params[2].seriesName +
                            ":" +
                            params[2].value +
                            "<br/>" +
                            params[1].seriesName +
                            ":" +
                            params[1].value +
                            "<br/>" +
                            params[0].seriesName +
                            ":" +
                            params[0].value;
                        return re;
                    },
                },
                legend: {
                    data: [
                        { name: "正面", icon: "circle" },
                        { name: "负面", icon: "circle" },
                        { name: "中立", icon: "circle" },
                    ],
                    itemWidth: 8,
                    itemGap: 30,
                    top: 0,
                    left: 200,
                    textStyle: {
                        color: "#adbcd8",
                    },
                    formatter: function (name) {
                        if (name == "正面") {
                            name += " : " + upSum;
                        } else if (name == "负面") {
                            name += " : " + downSum;
                        } else if (name == "中立") {
                            name += " : " + natureSum;
                        }
                        return name;
                    },
                    borderWidth: 0,
                },
                grid: {
                    left: "4%",
                    right: "50",
                    bottom: "0",
                    show: false,
                    containLabel: true,
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#eaf0fe",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ["#eaf0fe"],
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#adbcd8",
                        },
                    },
                },
                xAxis: [
                    {
                        type: "category",
                        axisTick: { show: false },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#eaf0fe",
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ["#eaf0fe"],
                                type: "dashed",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#adbcd8",
                            },
                        },
                        data: catg,
                    },
                ],
                series: [
                    {
                        name: "中立",
                        type: "bar",
                        stack: "one",
                        barGap: "-100%",
                        barCategoryGap: "50%",
                        itemStyle: {
                            normal: {
                                color: "#2d74fb",
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                position: "left",
                            },
                        },
                        barWidth: "30%",
                        data: data.nature,
                    },
                    {
                        name: "负面",
                        type: "bar",
                        stack: "one",
                        barGap: "-100%",
                        barCategoryGap: "50%",
                        itemStyle: {
                            normal: {
                                color: "#ff2828",
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                position: "left",
                            },
                        },
                        barWidth: "30%",
                        data: data.down,
                    },
                    {
                        name: "正面",
                        type: "bar",
                        barGap: "-100%",
                        barCategoryGap: "50%",
                        itemStyle: {
                            normal: {
                                color: "#2bac52",
                            },
                        },
                        barWidth: "30%",
                        label: {
                            normal: {
                                show: false,
                                position: "inside",
                            },
                        },
                        stack: "one",
                        data: data.up,
                    },
                ],
            };
            barChart.setOption(option);
        },
    },
}